<template>
	<view class="container">
		<view class="sscontent">
			<view class="ssbox">
				<view class="iconfont icon-sousuo"></view><input class="ssinp" type="text" @input="ikeyword"
					confirm-type="search" @confirm="search" placeholder="搜索项目" />
			</view>
		</view>
		<view class="sort_ctlf">
			<scroll-view class="scroll_y" scroll-y="true">
				<view class="sort_ctlfbox">
					<!--分类列表点击后的当前状态下要给 sort_ctlf_a 加上 active-->
					<block v-for="(item,index) in cates" :key="item.id">
						<view class="sort_ctlf_a" :class="cateid==item.id?'active':''" @click="qiehuan"
							:data-index="index">
							{{item.name}}
						</view>
					</block>
				</view>
			</scroll-view>
		</view>
		<view class="sort_ctfr">
			<!-- <view class="sort_title">{{catename}}</view> -->
			<view class="sort_list">
				<block v-for="(item,index) in rows" :key="item.id">
					<navigator :url="'/pages/goodsdetail/goodsdetail?id='+item.id" hover-class="none">
						<view class="sort_listli">
							<!-- <view class="sort_listliimg">
								<image mode="aspectFill" :src="item.image"></image>
							</view> -->
							<view class="sort_listliinfo">
								<view class="sort_listlititle">{{item.name}}</view>
								<view class="sort_listlitxt">类型：<text class="sort_listtxtname">{{item.cate}}</text></view>
								<view class="sort_listlitxt">发布日期：<text class="sort_listtxtname">{{item.createtime_text}}</text></view>
								<!-- <view class="sort_listliprice">￥{{item.price}}</view> -->
							</view>
						</view>
						<!-- <view class="sort_listli" style="padding-top: 5px;">
							<view class="sort_listlitxt">简介：{{item.desc}}</view>
						</view> -->
					</navigator>
				</block>

			</view>
		</view>
	</view>
</template>

<script>
	import API from "@/common/api.js";
	export default {
		data() {
			return {
				cateid: 0,
				cates: [],
				rows: [],
				keyword: "",
				catename: ""
			}
		},
		onLoad(options) {
			this.cateid = options.cateid
			if (this.cateid == 0) {
				this.catename = "全部项目";
			}
			this.getcate()
			this.search()
		},
		methods: {
			search() {
				var $this = this
				var shopid = uni.getStorageSync("shopid");
				API.post("product/getpros", {
					keyword: this.keyword,
					cateid: this.cateid,
					isshop: API.isshop,
					shopid: shopid
				}).then((res) => {
					if (res.code == 1) {
						$this.rows = res.data
					}
				})
			},
			ikeyword(e) {
				this.keyword = e.detail.value
			},
			qiehuan(e) {
				var index = e.currentTarget.dataset.index;
				this.cateid = this.cates[index].id
				this.catename = this.cates[index].name
				this.search()
			},
			getcate() {
				var $this = this
				API.post("product/getCates").then((res) => {
					if (res.code == 1) {
						$this.cates = res.data
						for (var i = 0; i < res.data.length; i++) {
							if ($this.cateid == res.data[i].id) {
								$this.catename = res.data[i].name
							}
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.sscontent {
		background: #fff;
		padding: 30rpx;
		box-sizing: border-box;
		overflow: hidden;
		display: flex;
		position: fixed;
		top: var(--window-top);
		left: 0;
		right: 0;
		z-index: 3;
	}

	.ssbox {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 80rpx;
		background: #f6f7f9;
		color: #222;
		font-size: 28rpx;
		position: relative;
		padding: 0 22rpx 0 92rpx;
		border: 2rpx #eee solid;
	}

	.ssbox .iconfont {
		position: absolute;
		top: 0;
		left: 36rpx;
		font-size: 44rpx;
		color: #999;
	}

	.ssinp {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		color: #444;
		font-size: 32rpx;
	}

	.sort_ctlf {
		width: 200rpx;
		position: fixed;
		top: var(--window-top);
		left: 0;
		bottom: 0;
		background: #f7f7f7;
		z-index: 2;
		box-sizing: border-box;
		padding: 144rpx 0 0;
	}

	.sort_ctlfbox {
		width: 100%;
		height: 100%;
	}

	.scroll_y {
		width: 100%;
		height: 100%;
	}

	::v-deep ::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}

	.sort_ctlf_a {
		color: #222;
		text-align: center;
		overflow: hidden;
		padding: 36rpx 10rpx;
		line-height: 44rpx;
		font-size: 30rpx;
		font-weight: bold;
		border-bottom: 2rpx #fff solid;
	}

	.sort_ctlf_a.active {
		background: #fff;
		color: $color;
		font-weight: bold;
		position: relative;
	}

	.sort_ctlf_a.active:after {
		z-index: 1;
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 8rpx;
		height: 100%;
		background: $color;
	}

	.sort_ctfr {
		padding: 150rpx 30rpx 30rpx 230rpx;
		height: 100%;
		overflow-y: auto;
		line-height: 40rpx;
		box-sizing: border-box;
	}

	.sort_title {
		padding: 20rpx 0 10rpx 6rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.sort_list {
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;
	}

	.sort_listli {
		width: 100%;
		overflow: hidden;
		padding: 20rpx 0;
	}

	.sort_listliimg {
		width: 180rpx;
		height: 180rpx;
		border-radius: 10rpx;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: Center;
		float: left;
	}

	.sort_listliimg image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}

	.sort_listliinfo {
		// padding-left: 206rpx;
	}

	.sort_listlititle {
		line-height: 44rpx;
		max-height: 88rpx;
		font-size: 30rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-weight: 700;
	}

	.sort_listlitxt {
		color: #999;
		margin-top: 10rpx;
		// margin-top: 30rpx;
	}
	.sort_listtxtname{
		color: #0083FF;
	}

	.sort_listliprice {
		color: #ff6600;
		font-size: 32rpx;
		font-weight: bold;
		margin-top: 10rpx;
	}

	/* #ifdef H5 */
	.sscontent {
		top: 0;
	}

	.sort_ctlf {
		top: 0;
	}

	/* #endif */
</style>